<template>
    <vxe-grid
        class="table-grid-data"
        ref='tableGrid'
        @toolbar-tool-click="toolbarToolClickEvent"
        @current-change="currentChange"
        @toolbar-button-click="toolbarButtonClickEvent"
        v-bind="gridOptions">
      <!-- 操作栏 -->
      <template #actions="{ row, rowIndex }">
        <slot name="actions" :row="row" :rowIndex="rowIndex">
        </slot>
      </template>    
      <!-- 列框 -->
      <template #cells="{ row, rowIndex }">
           <slot name="cells" :row="row" :rowIndex="rowIndex"></slot>
      </template>   
         <!-- 列框 -->
      <template #cells1="{ row, rowIndex }">
           <slot name="cells1" :row="row" :rowIndex="rowIndex"></slot>
      </template>  
      <template #cells2="{ row, rowIndex }">
           <slot name="cells2" :row="row" :rowIndex="rowIndex"></slot>
      </template> 
      <template #cells3="{ row, rowIndex }">
           <slot name="cells3" :row="row" :rowIndex="rowIndex"></slot>
      </template>  
    </vxe-grid>
  </template>
  
  <script setup>
  import { computed,ref} from 'vue'
  import {getListDataPage} from '@/api/queryVxegrid'
  const xGrid = ref(null)
  const props = defineProps({
      tableHeight: {
        type:  String,
        default: 'auto'
      },
      minHeight: {
        type:  String,
        default: '80px'
      },
      toolbarConfig: {
        type: Boolean,
        default: true
      },
      refresh: { //刷新
        type: Boolean,
        default: true
      },
      import: { //导入
        type: Boolean,
        default: false
      },
      export: { //导出
        type: Boolean,
        default: false
      },
      print: { //打印
        type: Boolean,
        default: false
      },
      zoom: { //全屏
        type: Boolean,
        default: true
      },
      custom: { //选择列展示
        type: Boolean,
        default: true
      },
      columnsList: { //列表数据
        type: Array,
        default() {
          return []
        }
      },
      toolButtons: { //工具栏
        type: Array,
        default() {
          return []
        }
      },
      formConfig: { //查询表单
        type: [Object, Boolean],
        default() {
          return {}
        }
      },
      apiUrl: { //接口地址
        type: String,
        default() {
          return null
        }
      },
      method: {  //请求方式
        type: String,
        default() {
          return 'get'
        }
      },
      pageSize: { //分页默认行数
        type: Number,
        default: 10
      },
      pagerConfig: {
        type: Boolean,
        default() {
          return true
        }
      },
      queryData:{
        type:Object,
        default(){
            return {}
        }
      },
      addText:{
        type:String,
        default:'创建方案'
      },
      addCode:{
        type:String,
        default:''
      },
      switchType:{
        type:Boolean,
        default:true
      },
      showOverflow:{
        type:Boolean,
        default:true
      },
      spanList:{
        type: Array,
        default() {
          return []
        }
      },
      rowClassName:{
        type:Function,
        default(){
          return {}
        }
      },
      recombinationData:{
        type:Boolean,
        default:false
      },
      data:{
        type:Array,
        default:[]
      }
  })
  const emit = defineEmits(
    ['saveClick',
    'toolbarButtonClickEvent',
    'toolbarToolClickEvent',
    'currentChange',
    'switchChange',
    'changeIndex'])

 const gridOptions = computed(()=>{
    {
        return {
          border: true,
          resizable: true,
          showHeaderOverflow: true,
          showOverflow: props.showOverflow,
          height: props.tableHeight,
          minHeight:props.minHeight,
          autoResize:true,
          highlightHoverRow: true,
          highlightCurrentRow: true,
          keepSource: true,
          id: 'gridtableId',
          rowId: 'id',
          sortConfig: {
            trigger: 'cell',
            remote: false
          },
          filterConfig: {
            remote: false
          },
          pagerConfig: {
            pageSize: props.pageSize,
            enabled:false,
            pageSizes: [10, 15, 20, 50],
            layouts:['Total','PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'Sizes', 'FullJump']
          },
          formConfig: props.formConfig,
          toolbarConfig:false,
          columns: props.columnsList,
          data: props.data,
          columnConfig:{useKey:'Id'},
          rowConfig:{useKey:'Id'},
          checkboxConfig: {
            // labelField: 'id',
            reserve: true,
            highlight: true,
            range: true
          },
          spanMethod ({ row, _rowIndex, column, visibleData }){
						const fields = props.spanList
						function getValueByData(obj,path) {
							let paths = path.split('.');
							let res = obj;
							let prop;
							while(prop = paths.shift()) {
								if(res[prop]){
                   res = res[prop]
								}
							}
							return res;
						}
						if(column.property){
							const cellValue =getValueByData(row,column.property)
							if (cellValue && fields.includes(column.property)) {
								const prevRow = visibleData[_rowIndex - 1]
								let nextRow = visibleData[_rowIndex + 1]
									if (prevRow && getValueByData(prevRow,column.property) === cellValue) {
										return { rowspan: 0, colspan: 0 }
										} else {
										let countRowspan = 1
										while (nextRow && getValueByData(nextRow,column.property)=== cellValue) {
											nextRow = visibleData[++countRowspan + _rowIndex]
										}
										if (countRowspan > 1) {
											return { rowspan: countRowspan, colspan: 1 }
										}
									}
							}
						}
					},
          rowClassName:props.rowClassName
        }
      }
 })

      //table工具栏事件
   const toolbarButtonClickEvent=({code})=> {
    emit('toolbarButtonClickEvent', code)
    }
      //from工具栏事件
      const  toolbarToolClickEvent=({code})=> {
        emit('toolbarToolClickEvent', code)
      }
      const currentChange=(data)=> {
        emit("currentChange", data.row);
        emit("changeIndex", data.rowIndex);
      }
    const loadData=()=>{ //更新列表
      xGrid.value.commitProxy('query')
    }
    const btnAdd=()=>{ //更新列表
      emit('saveClick', {})
    }
    const onChange=(row)=>{ //更新列表
      emit('switchChange', row)
    }
    const getTableData=()=>{ //获取表格数据
     return  xGrid.value.getTableData().tableData
    }
    defineExpose({loadData,getTableData})

  </script>
  